
const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');

exports.__esModule = true;
exports.default = void 0;

const _extends2 = _interopRequireDefault(require('@babel/runtime/helpers/extends'));

const _utils = require('../utils');

const _relation = require('../mixins/relation');

const _router = require('../utils/router');

const _createNamespace = (0, _utils.createNamespace)('tab');
const createComponent = _createNamespace[0];
const bem = _createNamespace[1];

const _default = createComponent({
  mixins: [(0, _relation.ChildrenMixin)('vanTabs')],
  props: (0, _extends2.default)({}, _router.routeProps, {
    dot: Boolean,
    name: [Number, String],
    info: [Number, String],
    badge: [Number, String],
    title: String,
    titleStyle: null,
    disabled: Boolean,
  }),
  data: function data() {
    return {
      inited: false,
    };
  },
  computed: {
    computedName: function computedName() {
      return (0, _utils.isDef)(this.name) ? this.name : this.index;
    },
    isActive: function isActive() {
      const active = this.computedName === this.parent.currentName;

      if (active) {
        this.inited = true;
      }

      return active;
    },
  },
  watch: {
    title: function title() {
      this.parent.setLine();
    },
    inited: function inited(val) {
      const _this = this;

      if (this.parent.lazyRender && val) {
        this.$nextTick(() => {
          _this.parent.$emit('rendered', _this.computedName, _this.title);
        });
      }
    },
  },
  render: function render(h) {
    const { slots } = this;
    const { parent } = this;
    const { isActive } = this;
    const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
    const show = parent.scrollspy || isActive;
    const Content = shouldRender ? slots() : h();

    if (parent.animated) {
      return h('div', {
        attrs: {
          role: 'tabpanel',
          'aria-hidden': !isActive,
        },
        class: bem('pane-wrapper', {
          inactive: !isActive,
        }),
      }, [h('div', {
        class: bem('pane'),
      }, [Content])]);
    }

    return h('div', {
      directives: [{
        name: 'show',
        value: show,
      }],
      attrs: {
        role: 'tabpanel',
      },
      class: bem('pane'),
    }, [Content]);
  },
});

exports.default = _default;
